<template>
  <div>
    <input type="password" v-model="password" @input="checkPasswordStrength">
    <div v-if="strength === 0">弱</div>
    <div v-else-if="strength === 1">中等</div>
    <div v-else-if="strength === 2">强</div>
    <div v-else>非常强</div>
  </div>
</template>
 
<script>
import { ref, defineComponent } from 'vue';
 
export default defineComponent({
  setup() {
    const password = ref('');
    const strength = ref(0);
 
    const checkPasswordStrength = () => {
      const minLength = 8;
      const hasNumber = /\d/.test(password.value);
      const hasUpper = /[A-Z]/.test(password.value);
      const hasLower = /[a-z]/.test(password.value);
 
      strength.value =
        (password.value.length >= minLength ? 1 : 0) |
        (hasNumber ? 2 : 0) |
        (hasUpper ? 4 : 0) |
        (hasLower ? 8 : 0);
    };
 
    return {
      password,
      strength,
      checkPasswordStrength,
    };
  },
});
</script>